css: Parse hex colors with alpha value

The CSS color spec version 4 introduces this, support has hit Safari,
Chrome and Firefox, so this looks like a feature that's here to stay.

https://drafts.csswg.org/css-color/#hex-notation

diff --git a/gtk/gtkcssparser.c b/gtk/gtkcssparser.c
index acc554d7978ceca8c7647cf0aeaf4c1eb57453c4..a840d9fbbdecfba3b0f259ad5c70fea163fb203a 100644 (file)
--- a/gtk/gtkcssparser.c
+++ b/gtk/gtkcssparser.c
@@ -831,15 +831,34 @@ _gtk_css_parser_try_hash_color (GtkCssParser *parser,
       g_ascii_isxdigit (parser->data[2]) &&
       g_ascii_isxdigit (parser->data[3]))
     {
-      if (g_ascii_isxdigit (parser->data[4]) &&
-          g_ascii_isxdigit (parser->data[5]) &&
-          g_ascii_isxdigit (parser->data[6]))
-        {
-          rgba->red   = ((get_xdigit (parser->data[1]) << 4) + get_xdigit (parser->data[2])) / 255.0;
-          rgba->green = ((get_xdigit (parser->data[3]) << 4) + get_xdigit (parser->data[4])) / 255.0;
-          rgba->blue  = ((get_xdigit (parser->data[5]) << 4) + get_xdigit (parser->data[6])) / 255.0;
-          rgba->alpha = 1.0;
-          parser->data += 7;
+      if (g_ascii_isxdigit (parser->data[4]))
+        { 
+          if (g_ascii_isxdigit (parser->data[5]) &&
+              g_ascii_isxdigit (parser->data[6]))
+            {
+              rgba->red   = ((get_xdigit (parser->data[1]) << 4) + get_xdigit (parser->data[2])) / 255.0;
+              rgba->green = ((get_xdigit (parser->data[3]) << 4) + get_xdigit (parser->data[4])) / 255.0;
+              rgba->blue  = ((get_xdigit (parser->data[5]) << 4) + get_xdigit (parser->data[6])) / 255.0;
+              if (g_ascii_isxdigit (parser->data[7]) &&
+                  g_ascii_isxdigit (parser->data[8]))
+                {
+                  rgba->alpha = ((get_xdigit (parser->data[7]) << 4) + get_xdigit (parser->data[8])) / 255.0;
+                  parser->data += 9;
+                }
+              else
+                {
+                  rgba->alpha = 1.0;
+                  parser->data += 7;
+                }
+            }
+          else
+            {
+              rgba->red   = get_xdigit (parser->data[1]) / 15.0;
+              rgba->green = get_xdigit (parser->data[2]) / 15.0;
+              rgba->blue  = get_xdigit (parser->data[3]) / 15.0;
+              rgba->alpha = get_xdigit (parser->data[4]) / 15.0;
+              parser->data += 5;
+            }
         }
       else
         {

diff --git a/testsuite/css/parser/color.css b/testsuite/css/parser/color.css
index 38e5448cc72c3644bb1cd4617fcaaa477637b471..6350bfb1c65e2945ce94583b1feb71541289374d 100644 (file)
--- a/testsuite/css/parser/color.css
+++ b/testsuite/css/parser/color.css
@@ -37,29 +37,37 @@ i {
 }
 
 j {
-  color: #012345;
+  color: #0123;
 }
 
 k {
-  color: lighter(red);
+  color: #012345;
 }
 
 l {
-  color: darker(red);
+  color: #FFEEDDCC;
 }
 
 m {
-  color: shade(green,0.5);
+  color: lighter(red);
 }
 
 n {
-  color: alpha(green,0.5);
+  color: darker(red);
 }
 
 o {
-  color: mix(red,blue,0.25);
+  color: shade(green,0.5);
 }
 
 p {
+  color: alpha(green,0.5);
+}
+
+q {
+  color: mix(red,blue,0.25);
+}
+
+r {
   color: @mygreen;
 }

diff --git a/testsuite/css/parser/color.ref.css b/testsuite/css/parser/color.ref.css
index ee6faf116d1e1ce15aea22510487c48d78244405..7ce7ed626e22511f1ec4f7ad13551f30e89b1b0e 100644 (file)
--- a/testsuite/css/parser/color.ref.css
+++ b/testsuite/css/parser/color.ref.css
@@ -37,29 +37,37 @@ i {
 }
 
 j {
-  color: rgb(1,35,69);
+  color: rgba(0,17,34,0.2);
 }
 
 k {
-  color: shade(rgb(255,0,0), 1.3);
+  color: rgb(1,35,69);
 }
 
 l {
-  color: shade(rgb(255,0,0), 0.69999999999999996);
+  color: rgba(255,238,221,0.8);
 }
 
 m {
-  color: shade(rgb(0,128,0), 0.5);
+  color: shade(rgb(255,0,0), 1.3);
 }
 
 n {
-  color: alpha(rgb(0,128,0), 0.5);
+  color: shade(rgb(255,0,0), 0.69999999999999996);
 }
 
 o {
-  color: mix(rgb(255,0,0), rgb(0,0,255), 0.25);
+  color: shade(rgb(0,128,0), 0.5);
 }
 
 p {
+  color: alpha(rgb(0,128,0), 0.5);
+}
+
+q {
+  color: mix(rgb(255,0,0), rgb(0,0,255), 0.25);
+}
+
+r {
   color: @mygreen;
 }

diff --git a/testsuite/css/parser/colors-errors.css b/testsuite/css/parser/colors-errors.css
index d5dd178cabe22ad2b68e07dc36be76cb340c9641..4f7f3f938de7c0209496afa8e871d1cdca0363af 100644 (file)
--- a/testsuite/css/parser/colors-errors.css
+++ b/testsuite/css/parser/colors-errors.css
@@ -7,25 +7,21 @@ b {
 }
 
 c {
-  color: #1234;
-}
-
-d {
   color: #12345;
 }
 
-e {
+d {
   color: #1234567;
 }
 
-f {
+e {
   color: notacolorname;
 }
 
-g {
+f {
   color: rgb(1,2,3,4);
 }
 
-h {
+g {
   color: rgba(1,2,3,4,5);
 }

diff --git a/testsuite/css/parser/colors-errors.errors b/testsuite/css/parser/colors-errors.errors
index 02e9c2b367245cb7a850aabc3318a2a70bd2a1c6..dddf389837a61f0146f5dfc4ede3473957159be8 100644 (file)
--- a/testsuite/css/parser/colors-errors.errors
+++ b/testsuite/css/parser/colors-errors.errors
@@ -5,4 +5,3 @@ colors-errors.css:14: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
 colors-errors.css:18: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
 colors-errors.css:22: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
 colors-errors.css:26: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
-colors-errors.css:30: error: GTK_CSS_PROVIDER_ERROR_SYNTAX

diff --git a/testsuite/css/parser/colors-errors.ref.css b/testsuite/css/parser/colors-errors.ref.css
index cfb1eff431767ef918dd3a8b2afd76689b2afda7..e458bcfc14e7e1c221017cf6bcbe88ce084bf87d 100644 (file)
--- a/testsuite/css/parser/colors-errors.ref.css
+++ b/testsuite/css/parser/colors-errors.ref.css
@@ -18,6 +18,3 @@ f {
 
 g {
 }
-
-h {
-}